<template>
    <div class="login">
        <div class="header-container">
            <h2 class="title">{{$t('login.company')}}</h2>
        </div>
        <div class="content-container">
            <div class="login-wrapper">
                <el-form :model="user" :rules="rule" ref="loginForm" label-width="100px">
                    <el-form-item :label="$t('login.userName')" prop="username">
                        <el-input v-model="user.username"/>
                    </el-form-item>
                    <el-form-item :label="$t('login.password')" prop="password" style="margin-top: 50px">
                        <el-input type="password" v-model="user.password" @keyup.enter.native="login"></el-input>
                    </el-form-item>
                    <div>
                        <el-checkbox v-model="checked">{{$t('login.rememberPass')}}</el-checkbox>
                    </div>
                </el-form>
                <el-button style="margin-top: 50px" type="primary" @click="login">{{$t('login.login')}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {userLogin} from "../api";
    import {ERROR_OK} from "../util/config";
    import {mapMutations} from 'vuex'
    import md5 from 'js-md5'

    export default {
        name: "login",
        data() {
            const username = localStorage.getItem('username');
            const password = localStorage.getItem('password');
            return {
                user: {
                    username: username,
                    password: password
                },
                checked: true,
                rule: {
                    username: [
                        {required: true, trigger: 'blur', min: 4, max: 50}
                    ],
                    password: [
                        {required: true, trigger: 'blur', min: 6, max: 20}
                    ],
                }
            }
        },
        methods: {
            async login() {
                this.$refs.loginForm.validate(async valid => {
                    if (valid) {
                        const {username, password} = this.user;
                        localStorage.setItem('username', username);
                        localStorage.setItem('password', password);
                        const {status, data} = await userLogin({username, password:md5(password)});
                        if (status === ERROR_OK) {
                            this.setAuth(data.acls);
                            this.setUser(data.user);
                            localStorage.setItem('userInfo', JSON.stringify(data.user));
                            localStorage.setItem('auth', JSON.stringify(data.acls));
                            this.$message({
                                message: 'Login Success',
                                type: 'success'
                            });
                            setTimeout(() => {
                                this.$router.replace('/dashboard');
                            }, 300)


                        } else {
                            this.$message.error('Please Retry')
                        }
                    }
                })
            },
            ...mapMutations(['setAuth', 'setUser'])
        }
    }
</script>

<style scoped lang="scss">
    .login {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: white;
        .header-container {
            background: #409eff;
            height: 100px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
            .title {
                margin: 0;
                text-align: left;
                margin-left: 200px;
                line-height: 100px;
                color: #fff;
                font-size: 1.5rem;
                text-shadow: 1px 1px 1px #2c3e50;
            }
        }
        .content-container {
            background-image: url("https://assets.hyatt.com/content/dam/hyatt/hyattdam/images/2016/07/05/1119/Hyatt-on-the-Bund-Shanghai-P336-City-Nighttime-View.jpg/Hyatt-on-the-Bund-Shanghai-P336-City-Nighttime-View.16x9.jpg?imwidth=1920 ");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            height: 100%;
            margin-top: 1px;
            .login-wrapper {
                float: right;
                margin-top: 30px;
                margin-right: 150px;
                height: 450px;
                width: 300px;
                box-sizing: border-box;
                padding: 50px 20px;
                background: rgba(200, 200, 200, .8);
                border-radius: 20px;
                box-shadow: 2px 2px 2px #ddd;
                border: 2px solid #409eff;
            }
        }
    }
</style>